/*
 * @Description: 发现页面
 * @Author: kanglin
 * @Date: 2018-11-14 10:34:36
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@import '~src/assets/css/common.less';

    .discovery{
		background: #F9F9F9;
        .articles{
			list-style: none;
			padding-top: 16*@rem-per-px;
        }
        .articles__item{
            margin-bottom: 16*@rem-per-px;
		}
    }
</style>

<template>
	<div class="discovery">
		<ul class="articles">
			<li
				v-for="(item,index) in articles"
				:key="index"
				class="articles__item"
				@click="handleClick(item.press_id)">
				<article-card
					:cover="item.image"
					:title="item.title"
					:date="item.time_ago"
					:count="item.hits"/>
			</li>
		</ul>

		<infinite-loading
			ref="infiniteLoading"
			@infinite="infiniteHandler">
			<div slot="spinner"/>
			<div
				slot="no-more"
				class="no-more">{{ $t('common.no_more_data') }}</div>
		</infinite-loading>
	</div>
</template>

<script>

import { ARTICLE } from 'src/API_LIST';

import { mapMutations, mapGetters } from 'vuex';

import qs from 'qs';

import ArticleCard from 'src/views/component/article-card';

import { appHandle } from 'src/views/mixins/appHandle';

/**
 * 发现页面
 * @vue-data {array} [articles=[]] - 文章列表的数组
 * @vue-data {Object} query_info - 分页搜索的参数对象
 * @vue-data {number} [query_info.page=1] - 分页搜索的页数
 * @vue-data {number} [query_info.per_page=5] - 分页搜索的每页显示数
 * @vue-data {string} [query_info.language=zh-cn] - 分页搜索的语言参数
 */
export default {
	name: 'Discovery',
	components: {
		ArticleCard,
	},
	mixins: [appHandle],
	data() {
		return {
			articles: [],
			query_info: {
				page: 1,
				per_page: 5,
				language: this.$url.language || this.$url.lang,
				store_id: this.$url.store_id,
			},
			theme_name: '',
		};
	},
	computed: {
		...mapGetters(['getThemeName']),
	},
	methods: {

		...mapMutations(['setThemeName']),

		/**
		 * 是否最后一页
		 * @param  {Number|String} page      {当前需要判断的页码}
		 * @param  {Number|String} last_page {最后一页页码}
		 * @return {Boolean} {true代表是最后一页}
		 */
		isLastPage(page, last_page) {
			return parseInt(page, 10) > parseInt(last_page, 10);
		},

		/**
		 * 无限加载的handle函数
		 * @param  {Object} $state {插件的状态管理}
		 */
		infiniteHandler($state) {
			this.fetchArticles()
				.then(({ data }) => {
					const { presses, app_theme } = data;
					const theme_name = app_theme || 'default';
					this.setThemeName(theme_name);

					if (!this.isLastPage(presses.current_page, presses.last_page)) {
						this.query_info.page += 1;
						this.articles.push(...presses.data);
						$state.loaded();
					} else {
						$state.complete();
					}
				})
				.catch((err) => {
					const toast = this.$createToast({
						type: 'error',
						time: 2000,
						txt: err.message,
					});
					toast.show();
				});
		},

		/**
		 * 获取文章列表
		 * @return {Promise} {请求文章列表的promise}
		 */
		fetchArticles() {
			const query_str = qs.stringify(this.query_info);

			return this.$http.get(`${ARTICLE}?${query_str}`, { hideLoading: true });
		},

		/**
		 * 查看文章详情
		 * @param  {String} press_id {当前的文章id}
		 */
		handleClick(press_id) {
			const detail_url = `${window.location.origin + window.location.pathname + window.location.search}#/article-detail?article_id=${press_id}&theme=${this.getThemeName}`;

			const param = {
				url: detail_url,
			};

			this.handleApp('articleDetail', JSON.stringify(param));
		},
	},
};
</script>
